<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>线下订单添加</title>
	<meta name="decorator" content="default"/>
	<script src="${ctxStatic }/jquery/jquery-1.8.3.min.js"></script>
	<link href="${ctxStatic}/jquery-ui-1.12.1/jquery-ui.min.css" rel="stylesheet" />
	<script src="${ctxStatic}/jquery-ui-1.12.1/jquery-ui.min.js" type="text/javascript"></script>
	<script src="${ctxStatic}/form-validate/jquery.validate.js" type="text/javascript"></script>
	<script type="text/javascript" src="${ctxStatic }/gov/js/cityselect.js"></script>
	<link href="${ctxStatic }/cityselector/cityselect.css" rel='stylesheet' type='text/css' />
	<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=kOQ8j9rd2ATw2R54boLMFUalu3gGNGDO&s=1"></script>
	<style>
	*{margin:0;padding:0; box-sizing:content-box; }
	</style>
	<script type="text/javascript">
//百度地图API功能
function G(id) {
	return document.getElementById(id);
}
var map = new BMap.Map("l-map");
var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
	{"input" : "suggestId"
	,"location" : map
});
ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
var str = "";
	var _value = e.fromitem.value;
	var value = "";
	if (e.fromitem.index > -1) {
		value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
	}    
	str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
	value = "";
	if (e.toitem.index > -1) {
		_value = e.toitem.value;
		value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
	}    
	str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
	G("searchResultPanel").innerHTML = str;
});
var myValue;
ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
var _value = e.item.value;
	myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
	G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
	setPlace();
	// 选中详细地址后，调用百度地图获取 云地理编码 
	var address = encodeURIComponent(myValue);
	$.getJSON(
			"https://api.map.baidu.com/cloudgc/v1?ak=kOQ8j9rd2ATw2R54boLMFUalu3gGNGDO&s=1&address="+address+"&callback=?",
			function(data){
			/* if(data.status == 0 && data.result.length>0 ){
				$('#departcityName').val(data.result[0].address_components.city);
				var $sitename = $('#departcityName').val();
				$.get("${ctxFront}/sms/getSiteId","sitename="+$sitename,function(d){
					if(d!=null&&d!=''){
						$("#siteid").val(d);
					}else{
						$("#siteid").val("");
					}
				});
			} */
		});
});
function setPlace(){
	map.clearOverlays();    //清除地图上所有覆盖物
	function myFun(){
		var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
		map.centerAndZoom(pp, 18);
		map.addOverlay(new BMap.Marker(pp));    //添加标注
	}
	var local = new BMap.LocalSearch(map, { //智能搜索
	  onSearchComplete: myFun
	});
	local.search(myValue);
}
</script>
<script>
	$(function() {
		
		if("${message}".length>0){
			alert("${message}");
		}
				// 初始化站点选择框
				$.post('${ctxFront}/info/site/siteJson', {
					spottypes : '0'
				}, function(data) {
					var allCity = data;//['北京市#001#1|beijing|bj','上海市#002#0|shanghai|sh'];
					new Vcity.CitySelector({
						input : 'departcityName',
						cityData : allCity
					});
					new Vcity.CitySelector({
						input : 'destcityName',
						cityData : allCity
					});
				});
				/*定制包车校验*/
				/*表单验证*/
				$('#custfo').validate({
					rules : {
						'departcity.sitename' : "required",
						'destcity.sitename': "required",
						bookingdays: "required",
						departdate: "required",
						boardaddr: "required",
						purchasenum: "required",
						dueamount: "required",
						contacts: "required",
						payertel : {
							required : true,
							isMobile : true
						}
					},
					messages : {
						'departcity.sitename' : "<i class='verico'></i>请选择出发地",
						'destcity.sitename': "<i class='verico'></i>请选择目的地",
						bookingdays: "<i class='verico'></i>请输入包车天数",
						departdate:"<i class='verico'></i>请输入出发时间",
						boardaddr: "<i class='verico'></i>请输入上车地点",
						purchasenum: "<i class='verico'></i>请输入车辆数",
						dueamount: "<i class='verico'></i>请输入金额",
						contacts: "<i class='verico'></i>请输入联系人",
					    payertel : {
							required : "<i class='verico'></i>请输入手机号码",
							isMobile : "<i class='verico'></i>请输入正确手机号码"
						}
					},
				});
				
				/*手机验证*/
				jQuery.validator
						.addMethod(
								"isMobile",
								function(value, element) {
									var length = value.length;
									var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
									return this.optional(element)
											|| (length == 11 && mobile
													.test(value));
								}, "请正确填写您的手机号码");
				
				/*  $('#ccc').bind('change',function(){
						var value = $(this).find('option:selected').val();
						if (value == '定金'){
							document.getElementById("ddd").style.display="";
						}else {
							document.getElementById("ddd").style.display="none";
						}
					});  */
				
	})
</script>
</head>
<body>
	<ul class="nav nav-tabs">
		<li ><a href="javascript:void(0)">线下订单填写</a></li>
	</ul>
	<br/>
	<form action="${ctx}/offline/tOffline/save" method="post"  id="custfo" class="form-horizontal">
		<sys:message content="${message}"/>		
		<div class="control-group">
			<label class="control-label">出发地：</label>
			<div class="controls">
				<input type="text" placeholder="填写城市" class="custom-city required"
				  id="departcityName" name="departcity.sitename"	autocomplete="off" /> 
			    <input type="hidden"  name="departcity.siteid"  >
			</div>
		</div>
			<div class="control-group">
			<label class="control-label">上车地点：</label>
			<div class="controls">
				<input type='text' class="required"  name="boardaddr" id="suggestId" placeholder="请填写详细地址"/>
				<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
			</div>
		</div>
		
		<div class="control-group">
			<label class="control-label">目的地：</label>
			<div class="controls">
				<input type="text" class="destatil required" placeholder="请填写抵达城市"
					id="destcityName" name="destcity.sitename" autocomplete="off" />
				<input type="hidden" name="destcity.siteid">
			</div>
		</div>
		
		
		<div class="control-group">
			<label class="control-label">出发时间：</label>
			<div class="controls">
				<input id="departdate" name="departdate" type="text" readonly="readonly" maxlength="20" class="Wdate"
				onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm',isShowClear:false,minDate:'%y-%M-%d'});"/>
			</div>
		</div>
		
		<div class="control-group">
			<label class="control-label">行程备注：</label>
			<div class="controls">
				<textarea htmlEscape="false" name="remarks"  rows="4"></textarea>
			</div>
		</div>
		
		<div class="control-group">
			<label class="control-label">包车天数：</label>
			<div class="controls">
				<input name="bookingdays" type="number"  class="required" id="day" min="0"/> 
			</div>
		</div>
		
		
		<div class="control-group">
			<label class="control-label">车型：</label>
			<div class="controls">
				<select name="cartype.cargotypeid"  class="required">
			<c:forEach items="${cargotypeList }" var="cargotype">
				<option value="${cargotype.cargotypeid }" >${cargotype.typename }</option>
			</c:forEach>
			</select>
			</div>	
		</div>
		
		<div class="control-group">
			<label class="control-label">车辆数：</label>
			<div class="controls">
				<input type="number" name="purchasenum"  class="required" min="0" max="10"/>
			</div>
		</div>
		
		<div class="control-group">
			<label class="control-label">订单金额：</label>
			<div class="controls">
				<input type="number" class="required"  name="dueamount" min="0"/>
			</div>
		</div>
		
		<!-- <div class="control-group">
			<label class="control-label">支付方式：</label>
			<div class="controls">
				<select name="orderRemarks"  class="required" id="ccc">
					<option value="全款" >全款</option>
					<option value="现收" >现收</option>
					<option value="挂账" >挂账</option>
					<option value="定金" >定金</option>
				</select>
				<input type='text'  name="orderRemarks2" style="display: none" id="ddd"/>
			</div>
		</div> -->
		<div class="control-group">
			<label class="control-label">现收：</label>
			<div class="controls">
				<input name="nowpay"  type="number" min="0" value="0"/>
			</div>
			<label class="control-label">定金：</label>
			<div class="controls">
				<input name="downpay"  type="number" min="0" value="0"/>
			</div>
			<label class="control-label">挂账：</label>
			<div class="controls">
				<input name="ownpay"  type="number" min="0" value="0"/>
			</div>
		</div>
		<div class="control-group">
			<label class="control-label">用车单位：</label>
			<div class="controls">
				<input name="clientname" type='text'  />
			</div>
		</div>
		<div class="control-group">
			<label class="control-label">业务员：</label>
			<div class="controls">
				<input name="merchandiser" type='text'  />
			</div>
		</div>
		<div class="control-group">
			<label class="control-label">是否包含路杂费：</label>
			<div class="controls">
				<input name="roadfees" type="radio" class="required" value="1" checked="checked"/>&nbsp;是&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<input name="roadfees" type="radio" class="required" value="0" />&nbsp;否
			</div>
		</div>
		<div class="control-group">
			<label class="control-label">是否含油：</label>
			<div class="controls">
				<input name="oil" type="radio" class="required" value="1" checked="checked"/>&nbsp;是&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<input name="oil" type="radio" class="required" value="0" />&nbsp;否
			</div>
		</div>
		<div class="control-group">
			<label class="control-label">是否包含驾驶员住宿：</label>
			<div class="controls">
				<input name="driverlodge" type="radio" class="required" value="1" checked="checked"/>&nbsp;是&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<input name="driverlodge" type="radio" class="required" value="0" />&nbsp;否
			</div>
		</div>
		<div class="control-group">
			<label class="control-label">是否含税：</label>
			<div class="controls">
				<input name="tax" type="radio" class="required" value="1" checked="checked"/>&nbsp;是&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<input name="tax" type="radio" class="required" value="0" />&nbsp;否
			</div>
		</div>
		
		<div class="control-group">
			<label class="control-label">联系人姓名：</label>
			<div class="controls">
				<input name="contacts" type='text' class="required" />
			</div>
		</div>
		<div class="control-group">
			<label class="control-label">联系人电话：</label>
			<div class="controls">
				<input name="payertel" type='text' class="required" />
			</div>
		</div>
		<div class="form-actions">
				<input id="btnSubmit" class="btn btn-primary" type="submit"
					value="保 存" />
		</div>
	</form>
</body>
</html>